<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录测试页面</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/v2.6.10/vue.min.js"></script>
		<script src="js/v2.6.10/elementui.js"></script>
		<script src="js/v3.2.8/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<body>
		<div id="app">
			<el-row>
				<el-col :span="12">
					&nbsp;
				</el-col>
				<el-col :span="6">
					<el-form :model="user" label-width="80px" class="demo-ruleForm">
						<el-form-item label="用户名" prop="uname">
							<el-input v-model="user.uname"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="upwd">
							<el-input show-password v-model="user.upwd"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSumbit">登录</el-button>
							<el-button @click="resetForm('ruleForm')">重置</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				user: {
					uname: "",
					upwd: ""
				}
			},
			methods: {		
				//登录的方法
				onSumbit() {
					let that=this;
					axios.post(API + "logins",this.user)
					.then(function(res) {
						//alert(JSON.stringify(res));
						console.log(res);
						if(res.data.code==200){
							// 代表登录成功,取出res中的 token
							let jwtToken=res.data.data.jwtToken;		
							console.log(jwtToken);	
							// 把token存到本地存储
							window.localStorage.setItem("jwtToken",jwtToken);
							window.location.href="menu.html";
						}else{
							that.$message("登录出错了!")
						}		
					}).catch(err => {
						console.log(err);
					});
				},
				// 重置
				resetForm(formName) {
					this.$refs[formName].resetFields();
				}
			}
		})
	</script>
</html>